import React, { Component } from "react";
import { flushSync } from "react-dom";

export default class StateFlush extends Component {
  state = {
    count: 0,
  };
  clickAdd = () => {
    /* this.setState({
      count: this.state.count + 1,
    });
    console.log(this.state.count); // 0
    flushSync(() => {
      this.setState({
        count: this.state.count + 1,
      });
      console.log(this.state.count); // 0
    });
    console.log(this.state.count); // 1 */

    /* for (let i = 0; i < 5; i++) {
      this.setState({
        count: this.state.count + 1,
      });
      console.log(this.state.count); // render执行一次，打印5次0
    } */

    /* for (let i = 0; i < 5; i++) {
      flushSync(() => {
        this.setState({
          count: this.state.count + 1,
        });
      });
      console.log(this.state.count); // render执行五次，打印5次，分别是1，2，3，4，5
    } */
    for (let i = 0; i < 5; i++) {
      this.setState({
        count: this.state.count + 1,
      });

      if (i === 3) {
        flushSync(); // render两次，count值为2，flushSync()之后，count值为1，再次render，count值为2
      }
    }
  };

  changeState(x, y, event) {  // 最后一个参数是合成事件对象
    console.log(this, x * y); // undefined
    console.log(event); // SyntheticBaseEvent 合成事件对象：把各个浏览器的事件对象进行了兼容处理
  }
 
  render() {
    console.log("render");
    return (
      <div>
        <h1>同步刷新state状态</h1>
        <button onClick={this.clickAdd}>加法</button>
        <div>当前count值：{this.state.count}</div>
        <h1>React合成事件的this</h1>
        <button onClick={this.changeState}>改变state</button>
        <button onClick={this.changeState.bind(this, 10, 20)}>
          改变state1
        </button>
      </div>
    );
  }
}

/**
 * 合成事件如果绑定的是普通函数，当事件行为触发，函数中的this是undefined
 * 原因：React的事件委托机制
 * 解决方案：
 * 1. bind绑定this，使用apply/call改变this指向,函数会立即执行，不好
 *  + <button onClick={this.changeState.bind(this)}>改变state1</button>
 *  + bind绑定this --- 预先处理函数中的this和实参的
 * 2. 箭头函数
 *  + 给组件实例加上私有属性，实例.changeState = () => {}
 *
 */
